<template>
  <div class="search-page">
    <!-- 导航栏 -->
    <van-nav-bar
      title="搜索中心"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索框 -->
    <van-search
      v-model.trim="keyword"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @input="watchInput"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 联想列表 -->
    <van-cell-group v-if="showTip">
      <van-cell
        v-for="(item, index) in tipList"
        @click="test(item)"
        :key="index"
        icon="search"
      >
        <div>{{ item }}</div>
      </van-cell>
    </van-cell-group>
    <!-- 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
        <!-- 删除历史记录图标 -->
        <van-icon @click="delAll" name="delete" />
      </van-cell>
      <van-cell
        v-for="(item, index) in searchHistory"
        :key="index"
        :title="item"
        @click="getSearchResult(item)"
      >
        <!-- 删除历史记录图标 -->
        <van-icon name="cross" @click="delHistory(index)" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 引入搜索接口
import { getThinkContent } from "@/api/search.js";
// 引入本地存储
import { setData, getData } from "@/utils/localStorage.js";
export default {
  data() {
    return {
      keyword: "", //搜索关键字
      showTip: false, //联想提示和历史记录的显示
      tipList: [], //联想提示信息
      flag: true, //节流开关
      searchHistory: [] //历史搜索记录
    };
  },
  methods: {
    // 返回主页
    onClickLeft() {
      this.$router.push("/");
    },
    // 回车搜索
    onSearch() {
      console.log("搜索触发了");
      // 获取输入框的值
      let keyword = this.keyword;
      this.addHistory(keyword);
      // 调接口获取搜索到的内容，渲染到页面
    },
    // 点击联想提示添加到历史记录
    test(val) {
      console.log("点击了联想提示", val);
      debugger;
      // 添加到历史记录
      this.addHistory(val);
    },
    // 添加到历史记录
    addHistory(str) {
      // console.log(this.searchHistory);
      // 判断历史记录里这个关键字是否已经存在，如果存在把存在的删除，保存当前最新的
      const inx = this.searchHistory.findIndex(item => {
        return item === str;
      });
      // console.log(inx);
      if (inx > -1) {
        // 已经存在,删除
        this.searchHistory.splice(inx, 1);
      }
      // 存入本地历史记录
      this.searchHistory.unshift(str);
      // 把历史记录存到localStorage
      setData("story", this.searchHistory);
      // 调接口获取搜索的结果
      this.hgetSearch(str);
      // 以列表的形式渲染到页面
      // 清空输入框的值
    },
    // 获取搜索的结果
    hgetSearch(serchVal) {
      // 拿到关键字
      // 跳转页面
      this.$router.push({
        path: "/search/result",
        query: {
          searchKey: serchVal
        }
      });
    },
    // 点击历史记录获取搜索结果
    getSearchResult(searchItem) {
      this.hgetSearch(searchItem);
      // console.log(searchItem);
    },
    // 监听输入框输入
    watchInput() {
      // console.log("2222");
      // 节流优化
      let flag = this.flag;
      if (flag) {
        // console.log(333);
        this.flag = false;
        // 发送请求获取联想内容
        setTimeout(() => {
          // 获取联想内容，渲染到页面
          this.getTip();
        }, 100);
      } else {
        return;
      }
    },
    // 获取提示信息
    async getTip() {
      // 获取输入框的关键字
      let keyword = this.keyword;
      // 去除两端空白
      keyword = keyword.replace(/(^\s*)|(\s*$)/g, "");
      console.log(keyword);
      if (keyword) {
        try {
          const res = await getThinkContent(keyword);
          // console.log(res);
          // 渲染到页面
          this.tipList = res.data.data.options;
          // 显示联想框
          this.showTip = true;
          // console.log(111);
          // 打开开关
          this.flag = true;
        } catch (err) {
          console.log(err);
        }
      } else {
        this.showTip = false;
      }
    },
    // 获取历史记录从本地
    getHistory() {
      let localHistory = getData("story");
      if (localHistory) {
        this.searchHistory = localHistory;
      }
    },
    // 删除历史记录
    delHistory(val) {
      this.searchHistory.splice(val, 1);
      setData("story", this.searchHistory);
    },
    // 删除全部历史记录
    delAll() {
      this.searchHistory = [];
      setData("story", this.searchHistory);
    }
  },
  mounted() {
    this.getHistory();
    console.log(this.searchHistory);
  }
};
</script>
<style lang="less" scoped>
.search-page {
  /deep/.van-nav-bar {
    background-color: #1989fa;
    .van-icon,
    .van-nav-bar__text {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .van-cell__value {
    .van-icon {
      font-size: 20px;
    }
  }
}
</style>
